setPage();


$('.container').click(function(e){

  const arr = JSON.parse(localStorage.cart);

  if(e.target.getAttribute('name') === "all"){
   arr.forEach((item)=>{
     item.buy = e.target.checked;
   })
   
  }else  if( e.target.getAttribute('name') === 'other' ){
       
    for(let i = 0 ; i <= arr.length-1 ; i++){
      if( arr[i].goods_id === e.target.getAttribute('goods_id')){
        arr[i].buy = e.target.checked ;
        break
      }
    }
   
  }else if( e.target.getAttribute('name') === '-' ){
       
       for(let i = 0 ; i <= arr.length-1 ; i++){
         if( arr[i].goods_id === e.target.getAttribute('goods_id')){

           arr[i].num--;
           break
         }
       }
      
     }else if( e.target.getAttribute('name') === '+' ){
       
       for(let i = 0 ; i <= arr.length-1 ; i++){
         if( arr[i].goods_id === e.target.getAttribute('goods_id')){

           arr[i].num++;
           break
         }
       }
      
     }else if( e.target.getAttribute('name') === 'dei' ){
     


       for(let i = 0 ; i <= arr.length-1 ; i++){
         if( arr[i].goods_id === e.target.getAttribute('goods_id')){

          arr.splice(arr[i] , 1)
           break
         }
       }
      
     }





  localStorage.cart = JSON.stringify(arr);
  setPage();
})























function setPage(){
  if(localStorage.cart === undefined){
    $('.container').html('<h1>你还没有将商品添加购物车，快去选购商品吧</h1>');
  }else{
     const arr = JSON.parse(localStorage.cart);
     console.log(arr);
     if( arr.length === 0 ){
      $('.container').html('<h1>您的购物车已经被男朋友清空了,请您放心大胆的继续购物</h1>');
     }else{
        // 定义变量 存储结果
      let bool = true ;
      let type = 0 ;
      let number = 0 ; 
      let money = 0 ;

      let str = `
          <div class="count">
        <div class="divbtn">
          <input type="checkbox" name="all"><span>全选</span>
        </div>
        <h2 name="type">你选中了3种商品</h2>
        <h2 name="number">已选择183件商品</h2>
        <h2 name="money">总价:16666元</h2>
        <div class="adiv"><a href="javascript:;">去结算</a></div>
      </div>
    
     <ul>

      `;

      arr.forEach(item => {
        if(item.buy){
          type++;
          number += item.num;
          money += item.goods_price * item.num ;
        }else{
          bool = false;
        }

        str +=`
        <li>
      <p class="left">
        <input type="checkbox" name="other" goods_id="${item.goods_id}"  ${item.buy ? 'checked' :''}>
        </p>

       <div class="right">
         <p class="leftP">
           <img src="${item.goods_big_logo}">
         </p>
         <div class="middleP">
           <h4>${item.goods_name}</h4>
           <h5>￥ ${item.goods_price}</h5>
           <button name="dei" goods_id="${item.goods_id}">我不要了</button>
         </div>
         <p class="rightP">
           <button class="jian" name="-" goods_id="${item.goods_id}" ${ item.num === 1 ? 'disabled' : '' }>-</button>
           <button class="val" name="val" disabled>${item.num}</button>
           <button class="jia" name="+" goods_id="${item.goods_id}" ${ item.num === item.goods_number-0 ? 'disabled' : '' }>+</button>

         </p>
        </div>
      </li>
        
        `

      });

      str +=`

        </ul>
      </div>

      `;
      $('.container').html( str );



        // 设定全选input标签属性
        $('[name="all"]').prop('checked' , bool);

        // 如果 结算内容在 页面的起始部分 
        // 指向 设定标签内容
        $('[name="type"]').html(`您选中了${type}种商品`);
        $('[name="number"]').html(`您已选择${number}件商品`);
        $('[name="money"]').html(`总价${money.toFixed(2) }元`);
     }
  }
}